<template>
  <div class="page-container-padding">
    <!-- 图表解说评级 -->
    <div style="display: flex; align-items: center">
      <el-date-picker
        v-model="currentDate"
        value-format="yyyyMMdd"
        size="mini"
        placeholder="指定发布日期查询"
        :clearable="true"
      ></el-date-picker>
      <el-select v-model="isLevel" size="mini" style="margin-left: 6px">
        <el-option :value="0" label="未评级" />
        <el-option :value="1" label="已评级" />
      </el-select>
      <el-button
        size="mini"
        type="primary"
        style="margin-left: 6px"
        @click="queryRecords"
      >
        查询
      </el-button>
      <el-pagination
        style="margin-left: 20px"
        background
        hide-on-single-page
        :current-page="page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
    </div>
    <div
      style="line-height: 22px; background-color: #c7efcf;margin: 10px 0;padding: 0 6px;"
    >
      评级参考项：根据
      <span style="color: #ff430d">
        美观度、图表及时性、实用性、分析的逻辑、影响解读
      </span>
      分为5个等级，达到5项的A级、4项的B级、3项的C级。
    </div>
    <div v-loading="recordLoading" class="container">
      <div v-for="item in recordList" :key="item.id" class="record-item">
        <el-card>
          <div class="title">
            <span>{{ item.title }}</span>
            <span class="level-box">
              <span>评级：</span>
              <el-select v-model="item.level_flag" size="mini">
                <el-option value="A" label="A (达5项)"></el-option>
                <el-option value="B" label="B (达4项)"></el-option>
                <el-option value="C" label="C (达3项)"></el-option>
              </el-select>
              <el-button
                size="mini"
                type="primary"
                style="margin-left: 6px"
                :loading="item.levelLoading"
                @click="toSaveLevel(item)"
              >
                保存
              </el-button>
            </span>
          </div>
          <div class="image">
            <el-image fill="contain" :src="item.image_url"></el-image>
          </div>
          <div class="explain">{{ item.explanation }}</div>
          <div class="pub-info">
            <span class="pub-author">
              <span>{{ item.admin_name }} 创建于 {{ item.create_time }}</span>
              <span v-if="item.publish_time !== item.create_time.slice(0, 10)">
                ({{ item.publish_time }})
              </span>
            </span>
          </div>
        </el-card>
      </div>
      <div v-if="recordList.length < 1">
        <el-empty description="查询条件没有图表解说记录"></el-empty>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    GetLevelChartExplanation,
    LevelChartExplanation,
  } from '@/api/departmentWork/chartExplanation'
  export default {
    data() {
      return {
        currentDate: null,
        isLevel: 0,
        page: 1,
        pageSize: 4,
        totalCount: 0,
        recordLoading: false,
        recordList: [],
      }
    },
    mounted() {
      this.queryRecords()
    },
    methods: {
      queryRecords() {
        let queryDate = null
        if (this.currentDate) {
          queryDate = this.currentDate
        }
        this.recordLoading = true
        GetLevelChartExplanation(
          queryDate,
          this.isLevel,
          this.page,
          this.pageSize
        ).then((res) => {
          const data = res.data
          this.recordList = data.data.map((ele) => {
            ele.levelLoading = false
            return ele
          })
          this.page = data.page
          this.totalCount = data.total_count
          this.recordLoading = false
        })
      },

      currentPageChanged(page) {
        this.page = page
        this.queryRecords()
      },

      // 保存评级
      toSaveLevel(row) {
        // console.log(row)
        if (!row.level_flag) {
          this.$baseMessage('请选择等级再操作!', 'error')
          return
        }
        row.levelLoading = true
        LevelChartExplanation({ rid: row.id, level_flag: row.level_flag }).then(
          (res) => {
            this.$baseMessage(res.msg, res.code === 200 ? 'success' : 'error')
            row.levelLoading = false
          }
        )
      },
    },
  }
</script>
<style scoped lang="scss">
  .active-btn {
    opacity: 1;
  }
  .container {
    display: flex;
    align-items: top;
    margin-top: 16px;
    flex-wrap: wrap;
    .record-item {
      width: calc(50% - 40px);
      margin-right: 16px;
      margin-bottom: 16px;
      &:hover {
        .title .delete-btn {
          @extend .active-btn;
        }
      }
      .title {
        line-height: 26px;
        font-size: 18px;
        font-weight: 700;
        .level-box {
          float: right;
          font-size: 14px;
          font-weight: normal;
        }
      }
      .image {
        width: 100%;
        min-height: 300px;
        margin: 10px 0;
        border-top: 1.5px solid #24acf2;
        border-bottom: 1.5px solid #24acf2;
        padding: 15px 0;
      }
      .explain {
        font-size: 15px;
        text-indent: 2em;
        line-height: 26px;
      }
      .pub-info {
        width: 100%;
        font-size: 11px;
        color: #999;
        margin: 6px 0;
        .pub-author {
          float: right;
          padding-bottom: 8px;
        }
        // .pub-author {
        //   float: left;
        // }
      }
    }
  }
</style>
